<template>
	<view class="content">
		<view class="quesItem" v-if="type == 1 || type == 2" v-for="(item, index) in datas" :key="index">
			<view class="type_name">{{item.question_type_name}}</view>
			<view class="topic-item1">
				<rich-text :nodes="item.question_title"></rich-text>
			</view>
			<view class="answer-item1" v-if="item.is_sub_question == 1 && (type == 1 || (type == 2 && item.isshow))">
				<view class="answer_text" v-if="item.question_typeid == 1 || item.question_typeid == 2" v-for="(aitem, aindex) in item.answer_list"
				 :key="aindex">
					<text>{{aitem.text}}、</text>
					<rich-text :nodes="aitem.answer"></rich-text>
				</view>
			<rich-text class="zanswer"  :nodes="'正确答案：'+item.answer_text"></rich-text>
				<view class="analysis_title">题目解析</view>
				<view class="analysis">
					<rich-text :nodes="item.question_analysis"></rich-text>
				</view>
			</view>
			<view class="sub_question" v-if="item.is_sub_question == 2 && (type == 1 || (type == 2 && item.isshow))" v-for="(subitem,sindex) in item.sub_questionList"
			 :key="sindex">
				<view class="sub_type">{{sindex+1}} 、 {{subitem.question_type_name}}</view>
				<view class="sub_title">
					<rich-text :nodes="subitem.question_title"></rich-text>
				</view>
				<view class="answer_text" v-if="subitem.question_typeid == 1 || subitem.question_typeid == 2" v-for="(aitem, aindex) in subitem.answer_list"
				 :key="aindex">
					<text>{{aitem.text}}、</text>
					<rich-text :nodes="aitem.answer"></rich-text>
				</view>
				<rich-text class="zanswer"  :nodes="'正确答案：'+subitem.answer_text"></rich-text>
				<view class="analysis_title">题目解析</view>
				<view class="analysis">
					<rich-text :nodes="subitem.question_analysis"></rich-text>
				</view>
			</view>
			<view class="bottom_look" v-show="type == 2">
				<view class="iconfont iconjiantou look" :class="{ active_look: item.isshow }" @click="isshow(index)"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	export default {
		data() {
			return {
				type: 1,
				id: '',
				datas: [],
				ids: ''
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.type = e.type;
			if (this.type == 1) {
				this.ids = this.id;
				this.getQues();
			} else {
				this.getIds();
			}
		},
		methods: {
			getQues: function() {
				var data = {
					is_get_answer: 2,
					is_out_html: 2,
					question_id: this.ids
				};
				this.$zapi.apiPost('user/question.Lists/questionList', data).then(res => {
					if (res.data.code == 200) {
						let questionList = res.data.data.data;
						questionList.forEach((item, key) => {
							item.isshow = false;
						});
						var f_question_string = res.data.data.f_question_string;
						if (f_question_string != '') {
							this.$zapi.apiPost('user/question.Lists/questionSublist', {
								parent_question_id: f_question_string,
								'is_get_answer': 2,
								'is_out_html': 2
							}).then(res => {
								var sub_questionList = res.data.data;
								questionList.forEach((item, key) => {
									if (item.is_sub_question == 2) {
										sub_questionList.forEach((val, k) => {
											if (Number(item.question_id) == Number(val.f_question_id)) {
												util.latex_reques(val.question_sub_lists, 'question_title'); //解析 试题标题 latex 公式转换
												util.latex_reques(val.question_sub_lists, 'question_analysis'); //解析 试题解析 latex 公式转换
												util.latex_answer(val.question_sub_lists, 'answer_list');
												util.setquestion(val.question_sub_lists);
												item.sub_questionList = val.question_sub_lists;
											}
										})
									}
								})
							});
						}
						this.datas = questionList;
						util.latex_reques(this.datas, 'question_title'); //解析 试题标题 latex 公式转换
						util.latex_reques(this.datas, 'question_analysis'); //解析 试题解析 latex 公式转换
						util.latex_answer(this.datas, 'answer_list');
						util.setquestion(this.datas);
					} else {
						this.datas = [];
						uni.showToast({
							title: '还没有试题!',
							icon: 'none'
						});
					}
				});
			},
			getIds() {
				var data = {
					eid: this.id,
					is_out_html: 2,
					is_get_answer: 2,
					allowable_tags: '<img>'
				}
				this.$zapi.apiPost('user/exam.Lists/examQuestion', data).then(res => {
					if (res.data.code == 200) {
						var arr = res.data.data.question_lists;
						var ids = [];
						for (var i = 0; i < arr.length; i++) {
							ids.push(arr[i].question_id);
						}
						this.ids = ids.join(',');
						this.getQues();
					}
				})
			},
			isshow: function(index) {
				this.datas[index].isshow = !this.datas[index].isshow;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}
	
	.content{
		margin-bottom: 200upx;
	}
	
	.quesItem{
		margin-bottom: 30upx;
		padding: 30upx;
		background: #FFFFFF;
	}

	.type_name {
		font-size: 34upx;
		margin-left: 25upx;
		padding-left: 10upx;
		border-left: 5upx solid #FF9900;
		color: #999999;
		line-height: 1;
	}

	.topic-item1 {
		margin-left: 20upx;
		font-size: 34upx;
		color: #333333;
		margin-top: 15upx;
		margin-right: 20upx;
	}

	.election {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160upx;
		background: #ff9900;
		color: #ffffff;
		border-radius: 30upx;
		margin-right: 20upx;
		font-size: 28upx;
	}

	.active_election {
		background: #FF9900;
	}



	.answer-item1 {
		margin-left: 20upx;
		margin-right: 20upx;
		font-size: 24upx;
		color: #666666;
		margin-top: 5upx;
		margin-bottom: 15upx;
	}

	.answer_text {
		font-size: 32upx;
		color: #666666;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10upx;
	}

	.zanswer {
		margin-top: 20upx;
		font-size: 32upx;
		color: #FF9900;
	}

	.analysis_title {
		font-size: 34upx;
		font-weight: 500;
		color: #333333;
		margin-top: 20upx;
		margin-bottom: 14upx;
	}

	.analysis {
		font-size: 32upx;
		color: #666666;
	}


	.sub_question {
		width: 92%;
		margin-left: 5%;

		.sub_type {
			margin: 20upx 0upx;
			line-height: 1;
			font-size: 30upx;
			color: #999999;
		}

		.sub_title {
			font-size: 30upx;
			color: #333333;
		}

		.answer_text {
			font-size: 30upx;
			color: #666666;
			line-height: 60upx;
		}

		.zanswer {
			margin-top: 20upx;
			font-size: 30upx;
			color: #FF9900;
		}

		.analysis_title {
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			margin-top: 20upx;
			margin-bottom: 14upx;
		}

		.analysis {
			font-size: 30upx;
			color: #666666;
		}
	}

	.bottom_look {
		display: flex;
		justify-content: flex-end;
	}

	.look {
		width: 45upx;
		margin-right: 30upx;
		font-size: 50rpx;
		line-height: 50rpx;
	}

	.active_look {
		transform: rotate(90deg);
	}
</style>
